<template>
  <el-row class="engineeringcases_total">
    <div class="engineeringcases">
      <div class="engineeringcases-about">
        <div class="engineeringcases-about_left">
          <h2 class="engineeringcases-about_red">
            工程案例
          </h2>
        </div>
        <div class="engineeringcases-about_right">
          <button class="engineeringcases-about_button">
            <router-link to="/engineering" class="engineeringcases-about_a">更多<span>></span></router-link>
          </button>
        </div>
      </div>
      <el-carousel indicator-position="outside"   :interval="3000" arrow="never" class="engineeringcases-main">
        <el-carousel-item v-for="(option,index) in LunbotuArray" :key="index" class="engineeringcases-main_photo">
          <!-- <img src="https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg" alt=""> -->
          <div v-for="(item,columnIndex) in option" :key="columnIndex" class="viewpaper">
            <router-link class="viewpaper-a" :to='item.path'>
              <div class="viewpaper-text">
                <div class="text-photo_border">
                  <img class="viewpaper-text_photo" :src="item.src" alt="">
                </div>
                <div class="viewpaper-text_div">{{item.title}}</div>
              </div>
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-carousel indicator-position="outside" :interval="3000" arrow="never" class="engineeringcases1-main">
        <el-carousel-item v-for="(option1,index1) in LunbotuArray1" :key="index1" class="engineeringcases1-main_photo">
          <div v-for="(item1,columnIndex1) in option1" :key="columnIndex1" class="viewpaper1">
            <router-link class="viewpaper-a" :to='item1.path'>
              <div class="viewpaper1-text">
                <div class="text-photo_border1">
                  <img class="viewpaper-text_photo1" :src="item1.src" alt="">
                </div>
                <div class="viewpaper-text_div1">{{item1.title}}</div>
              </div>
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="viewpaper-text" v-for="(option,index) in LunbotuArray" :key="index" >
        <div class="viewpaper-text_photo" v-for="(item,columnIndex) in option" :key="columnIndex">1</div>
      </div>   -->
    </div>
  </el-row>
</template>
<script>
    export default {
        data() {
            return {
                LunbotuArray:[],
                LunbotuArray1:[],
                // items:[
                //   [
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //   ],
                //   [
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //   ],
                //   [
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg"},
                //     { src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg"},
                //   ],
                // ]
            };
        },
        mounted () {
            // 初始化二维数组
            this.LunbotuArray = [
                [
                    { path:'/engineering?1',src:require('../assets/Engineeringcases/liangyou.jpg'),title:'粮油行业'},
                    { path:'/engineering?2',src:require('../assets/Engineeringcases/zaozhi.jpg'),title:'造纸行业'},
                    { path:'/engineering?3',src:require('../assets/Engineeringcases/化工化纤.jpg'),title:'化工化纤行业'}
                ],
                [
                    {path:'/engineering?4',src:require('../assets/Engineeringcases/食品饮料行业.jpg'),title:'食品饮料行业'},
                    {path:'/engineering?5',src:require('../assets/Engineeringcases/电子&电器行业.jpg'),title:'电子&电器行业'},
                    {path:'/engineering?6',src:require('../assets/Engineeringcases/yiyao.jpg'),title:'医药行业'},
                ],
                // [
                //     {path:'/engineering?7',src:"https://www.huashine.net/uploads/220530/1-2205301IQ61b.jpg",title:'电商行业案例-立体仓库'},
                //     {path:'/engineering?8',src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg",title:'化工行业案例-立体仓库'},
                //     {path:'/engineering?9',src:"https://www.huashine.net/uploads/220530/1-2205301I131529.jpg",title:'电机行业案例-立体仓库'},
                // ],
            ],
                this.LunbotuArray1 = [
                    [
                        { path:'/engineering?1',src:require('../assets/Engineeringcases/liangyou.jpg'),title:'粮油行业'},
                        { path:'/engineering?2',src:require('../assets/Engineeringcases/zaozhi.jpg'),title:'造纸行业'},

                    ],
                    [
                        {path:'/engineering?3',src:require('../assets/Engineeringcases/化工化纤.jpg'),title:'化工化纤行业'},
                        {path:'/engineering?4',src:require('../assets/Engineeringcases/食品饮料行业.jpg'),title:'食品饮料行业'},
                    ],
                    [
                        {path:'/engineering?5',src:require('../assets/Engineeringcases/电子&电器行业.jpg'),title:'电子&电器行业'},
                        {path:'/engineering?6',src:require('../assets/Engineeringcases/yiyao.jpg'),title:'医药行业'},
                    ],
                    // [
                    //     {path:'/engineering?7',src:"https://www.huashine.net/uploads/220530/1-2205301IQ61b.jpg",title:'电商行业案例-立体仓库'},
                    //     {path:'/engineering?8',src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg",title:'化工行业案例-立体仓库'},
                    // ],
                    // [
                    //     {path:'/engineering?9',src:"https://www.huashine.net/uploads/220530/1-2205301IQ61b.jpg",title:'电商行业案例-立体仓库'},
                    //     {path:'/engineering?10',src:"https://www.huashine.net/uploads/220530/1-2205301I51R58.jpg",title:'化工行业案例-立体仓库'},
                    // ],
                ]
        },
        name:"Engineeringcases"
    }
</script>
<style lang="" scoped>
  div /deep/ .el-carousel__indicator--horizontal .el-carousel__button {
    width: 20px;
    height: 20px;
    background: transparent;
    /* border: 1px solid ; */
    background-color: #908b8b;
    border-radius: 50%;
    /* display: flex;
    justify-content: space-around; */
    opacity: 0.5;
  }
  div /deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 20px;
    height: 20px;
    background: rgb(64, 158, 255);
    border-radius: 50%;
    opacity: 1;
  }
  div /deep/ .el-carousel-item {
    background-color: rgb(255, 255, 255);
    /* margin-top: 0px; */
  }
  .engineeringcases_total{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
  }
  .engineeringcases{
    width: 80%;
    height: 100%;
    margin: 0 auto;
    /* background-image: url(); */
    margin-top: 4%;
    margin-bottom: 5%;
  }
  .engineeringcases-about{
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
  }
  .engineeringcases-about_left{
    width: 250px;
    height: 50px;
    justify-content: center;
    align-items: center;
  }
  .engineeringcases-about_red::before {
    content: '';
    width: 4px;
    height: 24px;
    background-color: rgb(64, 158, 255);
    float: left;
    margin-right: 10%;
  }
  .engineeringcases-about_red > h2{
    float: left;
  }
  .engineeringcases-about_right {
    display: flex;
    align-items: flex-end;
  }
  .engineeringcases-about_right:hover .engineeringcases-about_button{
    background-color: #fff;
  }
  .engineeringcases-about_right:hover .engineeringcases-about_a{
    color: #8f8e8e;
  }
  .engineeringcases-about_button{
    width: 100px;
    height: 35px;
    border-radius: 40px;
    border: 0px;
    background-color: rgb(64, 158, 255);
    border: 1px solid #868686;
  }
  .engineeringcases-about_a{
    color: #fff;
  }
  .engineeringcases-about_a > span{
    margin-left: 6%;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: rgb(255, 255, 255);;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: rgb(255, 255, 255);
  }
  .engineeringcases-main{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
  }
  .engineeringcases1-main{
    display: none;
  }
  .engineeringcases-main_photo{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* border: 1px solid green; */
  }
  .viewpaper{
    width: 32%;
    height: 100%;
    display: flex;
    background-color: rgb(236, 236, 236);
    justify-content: center;
    /* border: 1px solid red; */
  }
  .viewpaper-a{
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .viewpaper:hover .viewpaper-text_photo{
    transform: scale(1.2);
  }
  .viewpaper:hover .viewpaper-text{
    background-color: rgb(64, 158, 255);
  }
  .viewpaper:hover .viewpaper-text_div{
    color: #fff;
  }
  .viewpaper-text {
    width: 100%;
    height: 100%;
    background-color: rgb(236, 236, 236);
    /* border: 1px solid yellow; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: center; */
  }
  .text-photo_border{
    width: 100%;
    height: 88%;
    /* border: 1px solid blue; */
    overflow: hidden;
  }
  .viewpaper-text_photo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    transition: transform .8s;
  }
  .viewpaper-text_div{
    width: 85%;
    height: auto;
    text-align: center;
    font-size: 16px;
    /* line-height: %; */
    /* margin: 0% 5%; */
    /* margin: 0; */
    /* padding: 0 3%; */
    /* background-color: #99a9bf; */
  }
  @media screen and (max-width: 991px){
    .engineeringcases-main{
      display: none;
    }
    .engineeringcases1-main{
      width: 100%;
      height: 100%;
      display: block;
    }
    .engineeringcases-main_photo{
      display: none;
    }
    .engineeringcases1-main_photo{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      /* flex-wrap: wrap;
      justify-content: space-between; */
    }
    .viewpaper{
      display: none;
    }
    .viewpaper1{
      width: 48%;
      height: 100%;
      /* border: 1px solid red; */
    }
    .viewpaper1-text{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: rgb(236, 236, 236);
    }
    .viewpaper-text_div1{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    .viewpaper-text_photo1{
      width: 100%;
      height: 100%;
    }
  }
  @media screen and (max-width: 481px){
    .engineeringcases-about_red::before {

      /* float: left; */
      margin-right: 6%;
    }
    .engineeringcases-about_right > button{
      width: 70px;
      height: 35px;
      border-radius: 40px;
      border: 0px;
      background-color: rgb(64, 158, 255);
      border: 1px solid #fff;
    }
    .engineeringcases-main{
      display: none;
    }
    .engineeringcases1-main{
      width: 100%;
      height: 100%;
      display: block;
    }
    .engineeringcases-main_photo{
      display: none;
    }
    .engineeringcases1-main_photo{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
    }

    .viewpaper1{
      width: 100%;
      height: 100%;
      /* border: 1px solid red; */
    }
    .viewpaper1-text{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: rgb(236, 236, 236);
    }
    .viewpaper-text_div1{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    .viewpaper-text_photo1{
      width: 100%;
      height: 100%;
    }

  }



</style>
